{% extends "bootstrap/base.html" %}
{% block title %}whenmgone{% endblock %}

{% block head %}
{{ super() }}
<!-- ico -->
<link rel="shortcut icon" href="{{ url_for('static',filename = 'ghost_ico.ico') }}" type="image/x-icon">
<!-- cdn css -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- self css -->
<link rel="stylesheet" href="{{ url_for('static', filename = 'contact.css') }}">

{% endblock %}

{% block content %}
<!-- navbar -->
<!-- navbar -->
<nav class="navbar container">
  <div class="col-md-4">
    <a href="/login"><h1>whenmgone</h1></a>   
  </div>
  <div class="col-md-2 col-md-offset-6">
    <br>
  
    {% if current_user.is_authenticated() %}
    <h5 class="login">{{ current_user.email }}</h5>
    {% else %}
      stranger
    {% endif %}    
  </div>

</nav>

<!-- register -->
<div class="container main_bd">
  <div class="stepbystep col-md-12">
    <ul class="nav navbar-nav col-md-12">
      <li class="step col-md-3">
        <a href="/contact">联系人</a>
      </li>
      <li class="step col-md-3">
<!--         <div id="triangle-right-active"></div> -->
        <a href="/lastwill">遗嘱</a>
      </li>
      <li class="step col-md-3 active">
        <!-- <div id="triangle-right"></div> -->
        <a href="/heatbeat">心跳</a>
      </li>
      <li class="step col-md-3">
        <!-- <div id="triangle-right"></div> -->
        <a href="/preview">预览</a>
      </li>
    </ul>
  </div>

<!-- 心跳设置页 -->
  <div class="contacts-add col-md-4">
  <form class="form-horizontal" action="/heatbeat" method="POST">
    <h3>心跳设置</h3>
    <br>

    <div class="form-group">
      {{ form.heartbeat_function.label(for="heatbeat-function",class="col-sm-4 control-label") }}
      <!-- <label for="heatbeat-function" class="col-sm-4 control-label">心跳方式</label> -->
      <div class="col-sm-8 radio">
        {{ form.heartbeat_function() }}
      </div>
    </div>

    <div class="form-group">
      {{ form.heartbeat_rate.label(for="heatbeat-rate",class="col-sm-4 control-label") }}
      <!-- <label for="heatbeat-function" class="col-sm-4 control-label">心跳方式</label> -->
      <div class="col-sm-8 radio">
        {{ form.heartbeat_rate() }}
      </div>
    </div>

    <div class="form-group">
      {{ form.heartbeat_delay.label(for="heatbeat-delay",class="col-sm-4 control-label") }}
      <!-- <label for="heatbeat-function" class="col-sm-4 control-label">心跳方式</label> -->
      <div class="col-sm-8 radio">
        {{ form.heartbeat_delay() }}
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-2 col-sm-offset-4">
        {{ form.submit(class="btn btn-default") }}
        <!-- <button type="submit" class="btn btn-default">保存</button> -->
      </div>
      <div class="col-sm-4">
        
        {% if message %} 
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
        {{ message }}
        {% endif %}
        <!-- <button type="submit" class="btn btn-default">保存</button> -->
      </div>
    </div>
  </form>
  </div>

<div class="contacts-list col-md-4">
</div>

<div class="contacts-help col-md-4">
  <div class="tip">
    <h6>Tip:</h6>
    <p>您可以选择通过邮件或者短信的方式和我们保持心跳。</p>
    <p>您可以选择一个合适的时间间隔，我们将按照该频率和您保持心跳连接，如果没有回复我们会每隔一天和您同步一次。</p>
    <p>当您长期失联后，超过心跳过期时间，我们将为您转发遗书邮件！</p>
  </div>
</div>
</div>


<!-- footer -->
<footer class="footer">
    <div class="container">
    <hr>
        <p>Copyright © whenmgone 2015</p>
    </div>
</footer>

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    var heartbeat_function = '{{ heartbeat_function|safe }}';
    var heartbeat_rate = {{ heartbeat_rate }};
    var heartbeat_delay = {{ heartbeat_delay }};
    if (heartbeat_function=='mail') { $('#heartbeat_function-0').attr("checked","True")}
      else{ $('#heartbeat_function-1').attr("checked","True")};
    if (heartbeat_rate==7) { $('#heartbeat_rate-0').attr("checked","True")}
      else if (heartbeat_rate==30) { $('#heartbeat_rate-1').attr("checked","True")}
      else{ $('#heartbeat_rate-2').attr("checked","True")};
    if (heartbeat_delay==7) { $('#heartbeat_delay-0').attr("checked","True")}
      else if (heartbeat_delay==30) { $('#heartbeat_delay-1').attr("checked","True")}
      else{ $('#heartbeat_delay-2').attr("checked","True")}
  });
</script>




{% endblock %}